/**
 * Experimental Draggable points plugin
 * Revised 2012-07-09
 *
 * On Saving this jsbin, remember to update http://jsfiddle.net/highcharts/AyUbx/
 */
(function(Highcharts) {
    var addEvent = Highcharts.addEvent,
        each = Highcharts.each;
    
    /**
     * Filter by dragMin and dragMax
     */
    function filterRange(newY, series) {
        var options = series.options,
            dragMin = options.dragMinY,
            dragMax = options.dragMaxY;
        
        if (newY < dragMin) {
            newY = dragMin;
        } else if (newY > dragMax) {
            newY = dragMax;
        }
        return newY;
    }
    
    Highcharts.Chart.prototype.callbacks.push(function (chart) {        
        
        var container = chart.container,
            dragPoint,
            dragX,
            dragY,
            dragPlotX,
            dragPlotY;
        
        chart.redraw(); // kill animation (why was this again?)
        
        addEvent(container, 'mousedown', function(e) {
            var hoverPoint = chart.hoverPoint,
                options = hoverPoint && hoverPoint.series.options;
            if (options.draggableX) {
                dragPoint = hoverPoint;
                
                dragX = e.pageX;
                dragPlotX = dragPoint.plotX;
            }
            
            if (options.draggableY) {
                dragPoint = hoverPoint;
                
                dragY = e.pageY;
                dragPlotY = dragPoint.plotY + (chart.plotHeight - (dragPoint.yBottom || chart.plotHeight));
            }
        });
        
        addEvent(container, 'mousemove', function(e) {
            if (dragPoint) {
                var deltaY = dragY - e.pageY,
                    deltaX = dragX - e.pageX,
                    newPlotX = dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding,
                    newPlotY = chart.plotHeight - dragPlotY + deltaY,
                    newX = dragX === undefined ?
                        dragPoint.x :                        
                        dragPoint.series.xAxis.translate(newPlotX, true),
                    newY = dragY === undefined ?
                        dragPoint.y :                        
                        dragPoint.series.yAxis.translate(newPlotY, true),
                    series = dragPoint.series;
                
                newY = filterRange(newY, series);

                dragPoint.update([newX, newY], false);
                chart.tooltip.refresh(dragPoint);
                if (series.stackKey) {
                    chart.redraw();
                } else {
                    series.redraw();
                }
            }
        });
        
        function drop(e) {
            if (dragPoint) {
                var deltaX = dragX - e.pageX,
                    deltaY = dragY - e.pageY,
                    newPlotX = dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding,
                    newPlotY = chart.plotHeight - dragPlotY + deltaY,
                    series = dragPoint.series,
                    newX = dragX === undefined ?
                        dragPoint.x :                        
                        dragPoint.series.xAxis.translate(newPlotX, true),
                    newY = dragY === undefined ?
                        dragPoint.y :                        
                        dragPoint.series.yAxis.translate(newPlotY, true);           
                
                newY = filterRange(newY, series);
                dragPoint.firePointEvent('drop');
                dragPoint.update([newX, newY]);
                
                dragPoint = dragX = dragY = undefined;
            }
        }
        addEvent(document, 'mouseup', drop);
        addEvent(container, 'mouseleave', drop);
    });
    
    /**
     * Extend the column chart tracker by visualizing the tracker object for small points
     */
    var colProto = Highcharts.seriesTypes.column.prototype,
        baseDrawTracker = colProto.drawTracker;
    
    colProto.drawTracker = function() {
        var series = this;
        baseDrawTracker.apply(series);
        
        each(series.points, function(point) {
            point.tracker.attr(point.shapeArgs.height < 3 ? {
                'stroke': 'black',
                'stroke-width': 2,
                'dashstyle': 'shortdot'
            } : {
                'stroke-width': 0
            });
        });
    };
    
})(Highcharts);




var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        animation: false
    },

    title: {
        text: 'Temperarure chart'
    },
    
    xAxis: {
        type: 'datetime',
        title:{
        	text: 'time'
        },
        dateTimeLabelFormats:{
        	hour: '%H:%M'
        }
    },
    
    yAxis: {
        title:{
        	text: 'temperature'
        }
    },
        
    plotOptions: {
        series: {
            cursor: 'ns-resize',
            point: {
                events: {
                    drop: function() {
                        $('#report').html(
                            this.category + ' was set to ' + Highcharts.numberFormat(this.y, 2)
                        );
                    }
                }
            }
        },
        column: {
            stacking: 'normal'
        }
    },
    
    tooltip: {
        yDecimals: 2
    },

    series: [{
    	name: 'Temperature Outside',
    	data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
        draggableY: true,
        pointInterval: 3600 * 1000,
        type: 'areaspline'
    }, {
    	name: 'Temperature Inside',
    	data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
        draggableY: true,
        pointInterval: 3600 * 1000,
        type: 'areaspline'
        
    }]

});